import React, { useState } from 'react';
import { Card, Form, Input, Switch, Button, Space, message } from 'antd';
import { SaveOutlined } from '@ant-design/icons';

const SettingsPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSave = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      
      // 保存设置到本地存储
      localStorage.setItem('appSettings', JSON.stringify(values));
      message.success('设置保存成功');
    } catch (error) {
      message.error('保存失败');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.resetFields();
    localStorage.removeItem('appSettings');
    message.success('设置已重置');
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card title="应用设置">
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            autoUpload: false,
            maxConcurrentUploads: 3,
            videoQuality: 'high',
            autoRetry: true,
            retryCount: 3,
            notification: true,
            savePath: '',
          }}
        >
          <Form.Item
            label="上传设置"
            name="autoUpload"
            valuePropName="checked"
          >
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>

          <Form.Item
            label="最大并发上传数"
            name="maxConcurrentUploads"
            rules={[{ required: true, message: '请输入最大并发上传数' }]}
          >
            <Input type="number" min={1} max={10} />
          </Form.Item>

          <Form.Item
            label="视频质量"
            name="videoQuality"
            rules={[{ required: true, message: '请选择视频质量' }]}
          >
            <select>
              <option value="high">高清</option>
              <option value="medium">标清</option>
              <option value="low">流畅</option>
            </select>
          </Form.Item>

          <Form.Item
            label="自动重试"
            name="autoRetry"
            valuePropName="checked"
          >
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>

          <Form.Item
            label="重试次数"
            name="retryCount"
            rules={[{ required: true, message: '请输入重试次数' }]}
          >
            <Input type="number" min={1} max={5} />
          </Form.Item>

          <Form.Item
            label="通知提醒"
            name="notification"
            valuePropName="checked"
          >
            <Switch checkedChildren="开启" unCheckedChildren="关闭" />
          </Form.Item>

          <Form.Item
            label="默认保存路径"
            name="savePath"
          >
            <Input placeholder="留空使用系统默认路径" />
          </Form.Item>

          <Form.Item>
            <Space>
              <Button 
                type="primary" 
                icon={<SaveOutlined />}
                loading={loading}
                onClick={handleSave}
              >
                保存设置
              </Button>
              <Button onClick={handleReset}>
                重置设置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default SettingsPage;
